<script>
import {ref,computed } from "vue"
import { reactive, toRefs } from '@vue/reactivity'
import { useRouter} from 'vue-router'
import { useStore } from '../store'
import { getJsonshop } from "../api/shop.js";
import { Toast } from 'vant'
    export default {
        setup() {
            let router=useRouter()
            let dataFun=reactive({
                num:0,
                car:null,
                show:true,
                zong:"0.00",
                allcheck:false,
                onecheck:false,
                settlement:0,
            })
            let store=useStore()
            dataFun.num=store.shopnum
            dataFun.car=store.shopcar
            let shopList =ref(null);//商品列表

            let go=()=>{
                router.go(-1)
            }

             // 获取商品列表数据
                getJsonshop().then(data=>{
                    shopList.value=data.data.splice(0,6)

                })


            // 点击跳转详情页
            let goods=(shopid)=>{

                router.push({
                   path:"/shopDetail",
                   query:{
                        shopid
                    }
                })
            }

            // 删除
            let del=(shopid,value)=>{
               let index= store.shopcar.findIndex(item=>{
                    return item.shopid==shopid
                })
                store.shopcar.splice(index,1)
                dataFun.car=store.shopcar
                store.shopnum=store.shopnum-value
                dataFun.num=store.shopnum
                all()
            }

            // 加数量
            let add=(shopid)=>{
                let index= store.shopcar.findIndex(item=>{
                    return item.shopid==shopid
                })

                store.shopcar[index].value+=1
                store.shopnum+=1
                dataFun.num=store.shopnum
                all()
            }

            // 减数量
            let jian=(shopid)=>{
                let index= store.shopcar.findIndex(item=>{
                    return item.shopid==shopid
                })

                if(store.shopcar[index].value<=1){
                    store.shopcar[index].value=1
                }else{

                    store.shopcar[index].value-=1
                    store.shopnum-=1
                    dataFun.num=store.shopnum
                }
                all()
            }

            // 全选
            let allchecker=()=>{
                dataFun.allcheck=!dataFun.allcheck
                dataFun.car.forEach(item=>{
                    item.check=dataFun.allcheck
                })
                all()
            }

            // 单选
            let onechecker=(shopid)=>{
                let index =dataFun.car.findIndex(item=>{
                    return item.shopid==shopid
                })
                dataFun.car[index].check=!dataFun.car[index].check

                let alls= dataFun.car.every(item=>{
                    return item.check==true
                })

                if(alls){
                    dataFun.allcheck=true
                }else{
                    dataFun.allcheck=false
                }
                all()
            }
            
            // 计算总价格
            function all(){
                // console.log(dataFun.car);
                // 总价格
                dataFun.zong=dataFun.car.reduce((total,item)=>{
                    if(item.check==true){
                        return total + item.value * item.newprice
                    }else{
                        return total
                    }
                },0)
                dataFun.zong=dataFun.zong.toFixed(2)

                // 数量
                dataFun.settlement=dataFun.car.reduce((total,item)=>{
                    if(item.check==true){
                        return total + item.value
                    }else{
                        return total
                    }
                },0)
            }

            // 计算属性
            let allcheckFun=computed({
                get:()=>{
                    return dataFun.car.every(item=>item.check)
                },
                set:()=>{
                    // console.log(value);
                    // dataFun.car.forEach(item=>{
                    // item.check=value
                // })
                }
            })

            // 结算跳转
            let balance=()=>{
                if(dataFun.settlement==0){
                    Toast("没有选中结算商品")
                }else{
                    router.push({
                        path:"/ConfirmOrder",
                        query:{id:'01'}
                    })
                }
            }

            all()
            return {
                ...toRefs(dataFun),
                go,
                goods,
                shopList,
                del,
                add,
                jian,
                allchecker,
                onechecker,
                allcheckFun,
                balance
            }
        },
    }
</script>


<template>
    <div class="ShoppingCart">
        <div class="wrapper">
            <div class="header">
                <div class="header_left">
                    <div class="icon_coo icon-a-ziyuan558" @click="go"></div>
                    <div class="head_name">购物车<span v-if="num!=0">（{{num}}）</span></div>
                </div>
                <div class="header_right" v-if="num!=0 && show" @click="show=false">编辑</div>
                <div class="header_right" v-if="num!=0 && !show" @click="show=true">完成</div>
            </div>
            <div class="null" v-show="num==0"><img :src="require('../assets/imgs/null.png')" alt=""></div>

            <!-- 加购的商品 -->
            <div class="buyshop" v-show="num!=0">
                <ul>
                    <li v-for="item in car" :key="item.shopid" @click="goods(item.shopid)">
                        <div class="buyshop_center">
                            <div :class="['buyshop_left','icon_coo',item.check?'icon-xuanzhong':'']" @click.stop="onechecker(item.shopid)"></div>
                            <div class="img">
                                <img :src="item.url" alt="">
                            </div>
                            <div class="word">
                                <div class="word_title">{{item.title}}</div>
                                <div class="number">
                                    <div class="jian" @click.stop="jian(item.shopid)">-</div>
                                    <div class="digit">{{item.value}}</div>
                                    <div class="add" @click.stop="add(item.shopid)">+</div>
                                </div>
                            </div>
                        </div>
                        <div class="buyshop_right">
                            <div class="price">
                                <div class="newprice">￥{{item.newprice}}</div>
                            <div class="oldprice"><del>￥{{item.oldprice}}</del></div>
                            </div>
                            <div class="del iconL icon-lajitong" v-show="!show" @click.stop="del(item.shopid,item.value)"></div>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 底部结算 -->
            <div class="tarbar" v-show="num!=0">
                <div class="tarbar_left">
                    <div :class="['tblbox', 'icon_coo',  allcheckFun?'icon-xuanzhong':'']" @click="allchecker"></div>
                    <p>全选</p>
                </div>
                <div class="tarbar_center">合计：<span>￥{{zong}}</span></div>
                <div  @click="balance" class="btn">结算({{settlement}})</div>
            </div>



            <!-- 热门商品列表 -->
            <div class="shopList" v-show="num==0">
                <div class="hot"><p>热卖商品</p></div>
                <ul>
                    <li v-for="item in shopList" :key="item.shopid" @click="goods(item.shopid)">
                        <div class="img">
                            <img :src="item.url" alt="">
                            <div class="freeship" v-if="item.free">包邮</div>
                        </div>
                        <p class="tip">{{item.tip}}</p>
                        <p class="title">{{item.title}}</p>
                        <div class="price">
                            <div class="newprice">￥{{item.newprice}}</div>
                            <div class="oldprice"><del>￥{{item.oldprice}}</del></div>
                        </div>
                    </li>
                    
                </ul>

            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.ShoppingCart{
    .wrapper{
        .header{
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            z-index: 1;
            width: 100%;
            // padding: 0 12px;
            height: 50px;
            border-bottom: 1px solid rgb(248, 235, 207);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .header_left{
                font-size: 18px;
                padding-left: 16px;
                display: flex;
                align-items: center;
                // .icon-a-ziyuan558{}
                .head_name{
                    font-weight: 600;
                    font-size: 18px;
                    padding-left: 30px;
                }
            }
            .header_right{
                padding-right: 16px;
                color: rgb(16, 198, 44);
                font-size: 14px;
            }
        }
        .null{
            img{
                margin: 100px auto;
            }
        }
        .shopList{
            padding: 0 16px;
            margin-top: 4px;
            .hot{
                border-top: 1px solid #ccc;
                position: relative;
                height: 20px;
                p{
                    color: #999;
                    text-align: center;
                    background-color: #fff;
                    position: absolute;
                    padding: 0 15px;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                }
            }
             ul{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                & > li{
                    width: calc(50% - 5.5px);
                    margin-bottom: 36px;
                    margin-right: 11px;
                    &:nth-child(2n){
                        margin-right: 0;
                    }
                    & > .img{
                        width: 100%;
                        position: relative;
                        img{
                            width: 100%;
                            border-top-left-radius: 8px;
                            border-top-right-radius: 8px;
                        }
                        .freeship{
                            position: absolute;
                            top: 8px;
                            left: 8px;
                            font-size: 10px;
                            transform: scale(0.9);
                            color: #333;
                            background-color: #e57749;
                            padding: 3px 5px;
                            border-radius: 6px;
                        }
                    }
                    .tip{
                        padding: 0 8px;
                        height: 32px;
                        line-height: 32px;
                        background-color: #eeeeee;
                        border-bottom-left-radius: 8px;
                        border-bottom-right-radius: 8px;
                        font-size: 10px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .title{
                        font-size: 11px;
                        padding: 7px 0px 0 0;
                        height: 33px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    .price{
                        display: flex;
                        align-items: flex-end;
                        padding: 4px 0;
                        .newprice{
                            font-size: 15px;
                            color: #e57749;
                            font-weight: 500;
                        }
                        .oldprice{
                            transform: scale(0.9);
                            font-size: 10px;
                            color: #aaa;
                        }
                    }
                }
            }
        }
        .buyshop{     
            margin:  0px 16px 0;
            padding-top: 52px;
            ul{
                padding-bottom: 50px;
                li{
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    border-bottom: 1px solid #ccc;
                    padding: 16px 0;
                    .buyshop_center{
                        display:flex;
                        align-items: center;
                        .buyshop_left{
                            width: 16px;
                            height: 16px;
                            border: 1px solid #999;
                            border-radius: 50%;
                        }
                        .buyshop_left.icon-xuanzhong{
                            color: #e57749;
                            font-size: 18px;
                            text-align: center;
                            line-height: 16px;
                            border: 1px solid #e57749;
                        }
                        .img{
                            margin:0 8px 0 12px;
                            width: 58px;
                            height: 58px;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .word{
                            display: flex;
                            flex-direction: column;
                            height: 58px;
                            align-items: flex-start;
                            justify-content: space-between;
                            .word_title{
                                font-size: 12px;
                                width: 130px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            .number{
                                display: flex;
                                text-align: center;
                                line-height: 22px;
                                .jian{
                                    width: 22px;
                                    height: 22px;
                                    // background-color: #ccc;
                                    border: 1px solid #ccc;
                                }
                                .digit{
                                    width: 22px;
                                    height: 22px;
                                    border: 1px solid #ccc;
                                    border-left: 0;
                                    font-size: 14px;
                                }
                                .add{
                                    width: 22px;
                                    height: 22px;
                                    border: 1px solid #ccc;
                                    border-left: 0;
                                }
                            }
                        }
                    }
                    .buyshop_right{
                        display: flex;
                        height: 58px;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: flex-end;
                        .price{
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            .newprice{
                                font-size: 13px;
                                color: #e57749;
                            }
                            .oldprice{
                                font-size: 10px;
                                color: #999;
                            }
                        }
                    }
                }
            }

        }
        .tarbar{
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            box-shadow: 0 3px 14px 2px rgb(0 0 0 / 12%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 50px;
            background-color: #fff;
            .tarbar_left{
                display: flex;
                align-items: center;
                padding-left: 16px;
                .tblbox{
                    width: 16px;
                    height: 16px;
                    border: 1px solid #999;
                    border-radius: 50%;
                }
                .tblbox.icon-xuanzhong{
                    color: #e57749;
                    font-size: 18px;
                    text-align: center;
                    line-height: 16px;
                    border: 1px solid #e57749;
                }
                p{
                    font-size: 14px;
                    padding-left: 8px;
                }
            }
            .tarbar_center{
                font-weight: 600;
                span{
                    color: #e57749;
                }
            }
            .btn{
                margin-right: 16px;
                background-color: #e57749;
                font-weight: 600;
                height: 35px;
                // width: 100px;
                padding: 0 25px;
                text-align: center;
                line-height: 35px;
                border-radius: 18px;
                font-size: 14px;
            }
        }
    }
}
</style>